
 <template>
	 <view class="content">
		 <image class="logo" src="/static/logo.png"></image>
		 <view class="text-area">
			<text class="title">{{title}}</text>
		 </view>
		 <view style="padding: 20px;">
			<up-button type="primary" text="确定"></up-button>
			<up-button type="primary" size="small" text="大小尺寸"></up-button>
		 </view>
	   <view>
		 <text>{{ counter }}</text>
		 <button @click="increment">增加</button>
		 <button @click="reduction">减少</button>
	   </view>
	   <view style="padding: 20px;">
		   <text>{{ name }}</text>
			<up-button type="primary" text="确定" @click="patchName"></up-button>
	   </view>
	   <view style="padding: 20px;">
	   		   <text>{{ sex }}</text>
	   		<up-button type="primary" size="small" text="大小尺寸" @click="changeSex"></up-button>
	   </view>
   </view>
 </template>
  
 <script setup>
 import{ref}from'vue'
 import { useMainStore } from '../../src/utils/store.js'
 import { storeToRefs } from 'pinia'
  
	  const mainStore = useMainStore()
	  const title = ref('uniapp')
	  const { counter,name,sex } = storeToRefs(mainStore)
	  const increment = ()=>{
		  mainStore.increment()
	  }
	  const reduction = ()=>{
		  mainStore.reduction()
	  }
	  // $patch + 对象
	 const patchName = ()=>{
		 mainStore.$patch({
			 name:mainStore.name = '石头'
		 })
	 }
	 // $patch + 函数
	 const changeSex =()=>{
		 mainStore.$patch((res)=>{
			 console.log(res)
			 res.sex = '女'
		 })
	 }
 </script>
 <style>
	 .content {
	 	display: flex;
	 	flex-direction: column;
	 	align-items: center;
	 	justify-content: center;
	 }
	 
	 .logo {
	 	height: 200rpx;
	 	width: 200rpx;
	 	margin-top: 200rpx;
	 	margin-left: auto;
	 	margin-right: auto;
	 	margin-bottom: 50rpx;
	 }
	 
	 .text-area {
	 	display: flex;
	 	justify-content: center;
	 }
	 
	 .title {
	 	font-size: 36rpx;
	 	color: #8f8f94;
	 }
 </style>